<template>
    <view class="uni-shadow tem" @tap.stop="detail">
        <view class="font-bold u-line-1" @longtap="longTap(wageItem.name)">{{wageItem.name}}</view>
        <u-row class="u-m-t-10 u-flex u-flex-wrap">
            <u-col v-for="(item,index) in wageItem.list" :key="index" 
                :span="(index+1)%2==0?7:5" class="u-m-t-20 u-font-26 col">
                <text class="u-m-r-20 uni-dec-color">{{item.title}}</text>
                <uni-phone v-if="item.type=='phone'" :phone="item.value" size="14" />
                <text v-else>{{item.value}}{{item.value||item.value==0?item.unit:''}}</text>
            </u-col>
        </u-row>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>


<script>
export default {
    name: 'wageItem',
    props: {
        listItem: {
            type: Object,
            default () {
                return {}
            }
        }
    },

    data(){
        return{
            wageItem:{
                name:'项目名称', // gcmc
                list:[
                    { filed:'districtName', title:'属地类型', value:''},
                    { filed:'ffgzny', title:'工资发放月(最近)', value:''},
                    { filed:'staffs', title:'最近发放人数', value:'', unit:'人'},
                    { filed:'salary', title:'最近发放金额', value:'', unit:'万元'},
                    { filed:'cumtimes', title:'累计发放次数', value:'', unit:'次'},
                    { filed:'cumstaffs', title:'累计发放人数', value:'', unit:'人'},
                    { filed:'cumsalary', title:'累计发放金额', value:'', unit:'万元'},
                ]
            }
        }
    },

    created() {
        this.wageItem.name = this.listItem.gcmc
        this.wageItem.list.map((v,i)=>{
            v.value = this.listItem[v.filed]||this.listItem[v.filed]==0?this.listItem[v.filed]:'暂无数据'
        })
    
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({
                message: value,
                type: 'default',
                duration: 3000
            })
        },
        // 工资详情
        detail(){
            uni.navigateTo({
                url: '/pages/wage-bag/detail?id='+this.listItem.id
            })
        }
    },
}
</script>


<style scoped lang="scss">
    .tem{
        height: auto;
        border-radius: 16rpx;
        border: 1rpx solid #f8f8f8;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
        padding: 30rpx;
        flex-direction: column !important;
        align-items: flex-start;
        .col{
            flex-direction: row;
        }
    }
</style>